Skip to content

Conversation

@Pixselve
Copy link
Contributor

@Pixselve Pixselve commented Nov 5, 2025

Description

Add support for displaying series markers with different status states, particularly a "warning" status. This enables visual indication of series that require attention or have issues.

Changes include:

  • Extend Highcharts SeriesOptions interface with optional status property
  • Update ChartSeriesMarker to accept and render status prop
  • Pass status through chart legend and tooltip components
  • Add visual examples in marker-permutations page for warning state

How has this been tested?

  • Updated the permutations page.
image
  • Updated the core line chart.
image
  • Added unit tests.
Review checklist

Correctness

  • Changes include appropriate documentation updates.
  • Changes are backward-compatible if not indicated, see CONTRIBUTING.md.
  • Changes do not include unsupported browser features, see CONTRIBUTING.md.
  • 🚫 Changes were manually tested for accessibility, see accessibility guidelines.

Security

Testing

  • Changes are covered with new/existing unit tests?
  • Changes are covered with new/existing integration tests?

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

@Pixselve
Copy link
Contributor Author

Pixselve commented Nov 6, 2025

Actually found this change is not accessible. Will work on updating that

Add support for displaying series markers with different status states,
particularly a "warning" status. This enables visual indication of
series that require attention or have issues.

Changes include:
- Extend Highcharts SeriesOptions interface with optional status property
- Update ChartSeriesMarker to accept and render status prop
- Pass status through chart legend and tooltip components
- Add visual examples in marker-permutations page for warning state
@Pixselve Pixselve force-pushed the warning-icon-to-markers branch from d57ee33 to fab6169 Compare November 26, 2025 08:59
@Pixselve
Copy link
Contributor Author

Updated the warning icon to make it overlap a little with the marker:

image image

import pseudoRandom from "../utils/pseudo-random";

const i18nStrings = {
seriesStatusWarningAriaLabel: "warning",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can create us a feature request to add support for this prop in the built-in i18n

@pan-kot
Copy link
Member

pan-kot commented Dec 5, 2025

The doubling of the marker sizes affected the spacing of the legend and tooltip items by a lot. I don't think we should do this: we can try to make the size increase smaller, and can also update the spacings of the legend and the tooltip.

Screenshot 2025-12-05 at 09 16 05

@jperals
Copy link
Member

jperals commented Dec 9, 2025

Note that the PR has some conflicts to be solved.

…icon-to-markers

# Conflicts:
#	src/__tests__/__snapshots__/documenter.test.ts.snap
#	src/core/chart-api/chart-extra-legend.tsx
#	src/core/interfaces.ts
#	src/core/utils.ts
@Pixselve Pixselve requested a review from a team as a code owner December 10, 2025 10:24
@Pixselve Pixselve requested review from pan-kot and removed request for a team December 10, 2025 10:24
# Conflicts:
#	src/core/chart-api/chart-extra-legend.tsx
#	src/core/components/core-tooltip.tsx
@Pixselve
Copy link
Contributor Author

Note that the PR has some conflicts to be solved.

Resolved the conflict

…icon-to-markers

# Conflicts:
#	src/core/utils.ts
@pan-kot pan-kot added this pull request to the merge queue Jan 7, 2026
Merged via the queue into cloudscape-design:main with commit 73cbd49 Jan 7, 2026
42 of 44 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants